<!DOCTYPE html>
<html>
  <head>
    <title>products</title>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">

<link rel="stylesheet" href="../lib/weui.min.css">
<link rel="stylesheet" href="../css/jquery-weui.css">

  </head>

  <body ontouchstart>

    <header class='demos-header'>
      <h1 class="demos-title" style="text-align: center">商品列表</h1>
    </header>

    <div class="weui-grids">
      <a href="javascript:;" class="weui-grid js_grid"  m="1">
        <div class="weui-grid__icon">
          <img src="../mod-page/images/icon_nav_button.png" alt="">
        </div>
        <p class="weui-grid__label">
         1￥
        </p>
      </a>
      <a href="javascript:;" class="weui-grid js_grid" m="1.5">
        <div class="weui-grid__icon">
          <img src="../mod-page/images/icon_nav_cell.png" alt="">
        </div>
        <p class="weui-grid__label">
          1.5￥
        </p>
      </a>
      <a href="javascript:;" class="weui-grid js_grid"  m="2">
        <div class="weui-grid__icon">
          <img src="../mod-page/images/icon_nav_cell.png" alt="">
        </div>
        <p class="weui-grid__label">
          2￥
        </p>
      </a>
      <a href="javascript:;" class="weui-grid js_grid"  m="2.2">
        <div class="weui-grid__icon">
          <img src="../mod-page/images/icon_nav_cell.png" alt="">
        </div>
        <p class="weui-grid__label">
          2.2￥
        </p>
      </a>
      <a href="javascript:;" class="weui-grid js_grid"  m="5.5">
        <div class="weui-grid__icon">
          <img src="../mod-page/images/icon_nav_toast.png" alt="">
        </div>
        <p class="weui-grid__label">
          5.5￥
        </p>
      </a>
      <a href="javascript:;" class="weui-grid js_grid" m="9.9">
        <div class="weui-grid__icon">
          <img src="../mod-page/images/icon_nav_dialog.png" alt="">
        </div>
        <p class="weui-grid__label">
          9.9￥
        </p>
      </a>
      <a href="javascript:;"  class="weui-grid js_grid" m="12.9">
        <div class="weui-grid__icon">
          <img src="../mod-page/images/icon_nav_progress.png" alt="">
        </div>
        <p class="weui-grid__label">
          12.9￥
        </p>
      </a>
      <a href="javascript:;" class="weui-grid js_grid" m="10">
        <div class="weui-grid__icon">
          <img src="../mod-page/images/icon_nav_msg.png" alt="">
        </div>
        <p class="weui-grid__label">
          10￥
        </p>
      </a>
      <a href="javascript:;" class="weui-grid js_grid" m="20">
        <div class="weui-grid__icon">
          <img src="../mod-page/images/icon_nav_article.png" alt="">
        </div>
        <p class="weui-grid__label">
          20￥
        </p>
      </a>
    </div>

    <script src="../lib/jquery-2.1.4.js"></script>
<script src="../js/home.js"></script>
    <script src="../js/jquery-weui.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" charset="utf-8"></script>
<script>
  $(function() {
      $(".weui-grids a").click(function(){
          pay($(this).attr("m"));
      });
      if (typeof WeixinJSBridge == "undefined"){
          if( document.addEventListener ){
              document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
          }else if (document.attachEvent){
              document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
              document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
          }
      }

      initConfig();
  });

  function initConfig(){
      $.ajax({
          url:"/wechat/jsconfig",
          dataType:"json",
          data:{"vurl":location.href},
          success:function(da){
              wx.config({
                  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                  appId: da.data.appId, // 必填，公众号的唯一标识
                  timestamp: da.data.timestamp, // 必填，生成签名的时间戳
                  nonceStr: da.data.nonceStr, // 必填，生成签名的随机串
                  signature: da.data.signature,// 必填，签名
                  jsApiList: ["hideAllNonBaseMenuItem","onMenuShareAppMessage"] // 必填，需要使用的JS接口列表
              });
          }
      });
  }

  wx.ready(function(){
      wx.hideAllNonBaseMenuItem();
  });
  wx.error(function(res){
      alert("配置失败");
  });


 var openid =getQueryString("openid");
  var orderOk = false;
  var payParam;
  function onBridgeReady(){
      if(orderOk) {
          WeixinJSBridge.invoke(
              'getBrandWCPayRequest', {
                  "appId": payParam.appId,     //公众号名称，由商户传入
                  "timeStamp": payParam.timeStamp,         //时间戳，自1970年以来的秒数
                  "nonceStr": payParam.nonceStr, //随机串
                  "package": payParam.package,
                  "signType": payParam.signType,         //微信签名方式：
                  "paySign": payParam.paySign //微信签名
              },
              function (res) {
                  if (res.err_msg == "get_brand_wcpay_request:ok") {
                      updateStatus("ok");
                      alert("支付成功");
                  } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                      updateStatus("cancel");
                      alert("您已取消支付");
                  } else if (res.err_msg == "get_brand_wcpay_request:fail") {
                      updateStatus("fail");
                      alert("支付失败：" + JSON.stringify(res));
                  }
              }
          );
      }

  }

  function pay(m){
      //先去下单
      $.ajax({
          url:"/wcpay/order",
          dataType:"json",
          data:{"openid":openid,"money":m},
          async:false,
          beforeSend:function(){
               $.toast("支付中..","text");
          },
          success:function(da){
              if(da.msg == "ok"){
                  orderOk = true;
                  payParam = da.data;
                  onBridgeReady();
              }
          }
      });

  }

  function updateStatus(status){
      $.ajax({
          url:"/wcpay/updatePayStatus",
          data:{"orderId":payParam.package,"status":status}
      });
  }
</script>


  </body>

</html>
